import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import "./home-header.scss";
import avatar from "../../assets/imgs/avatar.jpg";

import { CalendarPicker } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import action from "../../store/action";

function HomeHeader(props) {
  const { day, month, today, onConfirm, userInfo, getUserInfo } = props;
  const navigate = useNavigate();
  const [visible, setVisible] = useState(false);
  function handlerSelectDate() {
    setVisible(true);
  }
  useEffect(() => {
    if (!userInfo) getUserInfo();
  }, []);
  return (
    <>
      <div className="home-head">
        <div className="info">
          <div className="days" onClick={handlerSelectDate}>
            <div className="day">{day}</div>
            <div className="month">{month}</div>
          </div>
          <div className="left-line"></div>
          <div className="text">早点休息</div>
        </div>
        <div className="avatar">
          {/* 在jsx视图中 想直接导入静态 地址不能使用相对路径 因为根据webpack打包项目路径会改变 */}
          <img
            src={userInfo ? userInfo.pic : avatar}
            onClick={() => {
              navigate("/personal");
            }}
          />
        </div>
      </div>
      <CalendarPicker
        visible={visible}
        defaultValue={today}
        onClose={() => setVisible(false)}
        onConfirm={onConfirm}
      />
    </>
  );
}

export default connect((state) => state.user, action.user)(HomeHeader);
